import React from 'react';
import { useStores } from '../libs/useStores';
import styled from 'styled-components';
import {observer} from 'mobx-react';

const StyledTips = styled.div`
    border: 1px dashed #F57C01;
    margin: 20px 0;
    padding: 5px 10px;
    color: #F57C01;
    text-align: center;
`

const Tips:React.FC = observer((props) => {

    const {UserInfoStore} = useStores()

    return (
        <StyledTips>
            {
                UserInfoStore.currentUser ? <div>欢迎 {UserInfoStore.currentUser.getUsername()}</div> : <div>{props.children}</div>
            }
        </StyledTips>
    );
})

export default Tips